<template>
  <div class="manageUser">
    <div class="btnGrounp">
      <el-button @click="exportFile">导出用户列表</el-button>
    </div>
    <div class="search">
      <ul>
        <li>
          <span>序列号</span>
          <el-input v-model="search.serialNumber" @keyup.enter.native="searchUser" placeholder="请输入内容"></el-input>
        </li>
       <li>
          <span>邮箱</span>
          <el-input v-model="search.email" @keyup.enter.native="searchUser" placeholder="请输入内容" type='email'></el-input>
        </li>
        <li class="lastLi">
          <el-button @click="searchUser">查询</el-button>
        </li>
      </ul>
    </div>
    <div class="content">
       <el-table id='out-table' :data="contentData" style="width: 100%" stripe :header-cell-class-name='lastTaHead'>
        <el-table-column label="头像" width="20%" align='center'>
          <template slot-scope="scope">
            <img :src="scope.row.headPortrait" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="serialNum" label="序列号" width="20%"  align='center'></el-table-column>
        <el-table-column prop="email" label="绑定邮箱" width="100%" align='center' class-name='lastTd'></el-table-column>
      </el-table>
    </div>
    <div class="paging">
      <el-pagination :page-size="pageSize"  layout="prev, pager, next" :total="totalNum" @current-change='changeCurrentPage'></el-pagination>
    </div>
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
  name: 'manageUser',
  data () {
    return {
      search:{
        serialNumber:'',//序列号
        email:'',//邮箱
      },//查询对象
      //内容数据
      contentData: [],
      pageSize:7,//每页显示条目个数
      totalNum:1000,//总条目数   
      currentPage:1,
    }
  },
  methods: {
    //删除行
    handleDelete(index, row) {
      let _this = this;
      //console.log(index, row);
      _this.$confirm('是否删除?',  {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          _this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //改变当前页
    changeCurrentPage(val){
      //console.log(`当前页: ${val}`);
      let _this = this;
      _this.currentPage = val;
      _this.getAllUsers();//跟获取用户信息为同一接口
    },
    //最后一列的表头
    lastTaHead({row, column, rowIndex, columnIndex}){
      let _this = this;
      if(columnIndex == 2){
        return 'lastTd'
      }
    },
    //获取所有用户数据
    getAllUsers(searchPage){
      let _this = this;
      let api = '/api/user/find_page';
      let sessionId = _this.$store.state.id;//获取token
      _this.axios({
        url:api,
        method: 'post',
        headers:{
          sessionId,
        },
        data:{
            "emailLike":_this.search.email,
            "pageIndex": searchPage == 1?searchPage:_this.currentPage,
            "pageSize": 7,
            "serialNumLike": _this.search.serialNumber,
        }
      }).then(res=>{
        if(res.data.code == 401){
          _this.$message({
            type: 'info',
            message: '登录已失效，请重新登录'
          });  
          _this.$router.push({
            path:"/"
          });
          return
        }
        _this.contentData = res.data.data.bussData;
        _this.contentData.forEach(item=>{
          if(item.headPortrait == ''){
            item.headPortrait = require('../assets/img/logo1.png');
          }
        });
        _this.totalNum = res.data.data.count;//获取总条数
        //console.log('所有用户信息',_this.contentData,'res',res);

      });
    },
    //导出用户表文件
    exportFile(){
      let _this = this;
      let url = 'http://120.78.135.29/api/user/excelOut';
      window.open(url);//下载文件
      // let sessionId = _this.$store.state.id;//获取token
      // _this.axios({
      //   url:api,
      //   method:'get',
      //    headers:{
      //     sessionId,
      //   },

      // }).then(res=>{
      //   //console.log('导出用户信息文件',res);
      //   if(res.data.code == 401){
      //     _this.$message({
      //       type: 'info',
      //       message: '登录已失效，请重新登录'
      //     });  
      //     _this.$router.push({
      //       path:"/"
      //     });
      //     return
      //   }
      //   // /* generate workbook object from table */
      //   // var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
      //   // /* get binary string as output */
      //   // var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      //   // try {
      //   //     FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
      //   // } catch (e) { if (typeof //console !== 'undefined') //console.log(e, wbout) }
      //   // return wbout
      // });
    },
    // 查询用户
    searchUser(){
      let _this = this;
      _this.getAllUsers(1);//跟获取用户信息为同一接口
    }
  },
  mounted(){
    let _this = this;
    _this.getAllUsers();//获取所有用户信息
  }
}
</script>

<style scoped>
/* 整体样式 */
.manageUser{
  height: 100%;
  width: 100%;
  position: relative;
  padding-left: 2%;
}
.manageUser>>>.btnGrounp .el-button{
  background-color: rgba(53, 174, 160, 1);
  color: rgb(255, 255, 255,1);
}
/* 查询 */
.manageUser>>>.search{
  width: 100%;
  height: 10%;
  line-height: 10%;
  position: absolute;
  top: 10%;
  font-size: .875rem;
}
/* 输入框 */
.manageUser>>>.el-input,.el-select{
  width: 70%;
}
/* 选择框下的输入框 */
/* .manageUser>>>.el-select .el-input{
  width: 100%;
} */
.manageUser>>>.search ul{
  width: 100%;
  height: 100%;
  display: flex;
  
}
.manageUser>>>.search ul li{
  /* flex:1; */
  padding-right: 1%;
}
.manageUser>>>.search ul li.lastLi{
    position:absolute;
    right: 15%;
}
.manageUser>>>.search ul li span{
  padding-right: 2%;
}
.manageUser>>>.search ul li.lastLi button{
  color:rgba(16, 16, 16, 1);
}
/* 主要内容 */
.manageUser>>>.content{
  width: 85%;
  position: absolute;
  top: 21%;
  color: rgba(16, 16, 16, 1) !important;
}
.manageUser>>>.content table{
  width: 100% !important;
}
/* table无数据时的显示 */
.manageUser>>>.el-table__empty-block{
   width: 100% !important;
}
/* 最后一列 */
.manageUser>>>.lastTd{
  text-align: left;
  padding-left: 2%;
}
/* 消除表头变形 */
.manageUser>>>table .gutter{
  display: block !important;
}
.manageUser>>>.content table td{
  /* width: 20% !important; */
}
.manageUser>>>.content img{
  width: 21%;
}
/* 分页 */
.manageUser>>>.paging{
  position: absolute;
  bottom: 0%;
  text-align: center;
  width: 85%;
}

</style>
